<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>HTML Programming - Fretboard Diagram Table</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="expires" content="" />
<meta name="lang" content="en-US" />
<meta name="template-info" content="intro.htm 2013-02-07 usp" />
<meta name="creation-date" scheme="iso8601" content="2013-08-15" />
<meta name="last-modified" scheme="iso8601" content="2013-08-15" />
<meta name="version" content="1" />
<meta name="author" content="USP" />
<meta name="robots" content="follow" />
<meta name="category" content="Programming/Html/Music" />
<meta name="keywords" content="HTML, music, fretboard, diagram, table." />
<meta name="description" content="Test page for developing the infrastructure of the fretboard diagram table." />

<link rel="stylesheet" type="text/css" href="../../includes/topic-2.css" />
<link rel="stylesheet" type="text/css" href="../../includes/table-2.css" />
<link rel="stylesheet" type="text/css" href="music.css" />
<link rel="stylesheet" type="text/css" href="local.css" />


<script language="JavaScript" type="text/javascript" src="../../includes/global.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/cookies.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/topic.js"></script>
<script language="JavaScript" type="text/javascript" src="music.js"></script>


</head><body class="content" onload="onloadTopic();"><a name="top"></a>

<h1>Fretboard Diagram Table</h1>

<p>There are three kind of rows:</p>

<ol>
<li>Upper Marker Row &mdash; holds the marker cells for the fret number indicators.</li>
<li>String Rows &mdash; cells for used and unused notes, string header cells, and the nut cell.</li>
<li>lower Marker Row &mdash; holds the marker cells for the fret number indicators.</li>
</ol>

<p>In general, there are following columns:</p>

<ol>
<li>Row Header &mdash; chord or diagram description, spans string rows..</li>
<li>String Number &mdash; string numeration as appears on a package of new string.</li>
<li>String Name &mdash; feflects the string tuning.</li>
<li>Open String column &mdash; the notes of the open strings.</li>
<li>Nut &mdash; spans all string rows.</li>
<li>Fet Columns &mdash; the notes.</li>
</ol>

<table class="fretboard" id="table-1"><tbody>
<tr class="marker">
	<th style="width: 6em;"></th>					<!-- for the row header cell -->
	<th style="width: 1em;"></th>					<!-- for the string number -->
	<th style="width: 1em;"></th>					<!-- for the string name -->
	<td></td>													<!-- for the open string cells -->
	<th style="width: 3px;"></th>					<!-- for the nut -->
	<td class="used">I</td>								<!-- first fret -->
	<td></td>													<!-- for the 2nd Fret -->
	<td class="used">III</td>							<!-- third fret -->
</tr>
<tr class="string" name="E" number="1">
	<th class="rowheader" rowspan="6">F chord</th>
	<th class="stringnumber">1</th>
	<th class="stringname">E</th>
	<td class="empty">&nbsp;</td>
	<th class="nut" rowspan="6">&nbsp;</th>
	<td class="root">F</td>
	<td class="empty">&nbsp;</td>
	<td class="empty">&nbsp;</td>
</tr>
<tr class="string" name="B" number="2">
	<th class="stringnumber">1</th>
	<th class="stringname">B</th>
	<td>&nbsp;</td>
	<!-- nut -->
	<td class="used">C</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>
<tr class="string" name="G" number="3">
	<th class="stringnumber">3</th>
	<th class="stringname">G</th>
	<td>&nbsp;</td>
	<!-- nut -->
	<td>&nbsp;</td>
	<td class="used">A</td>
	<td>&nbsp;</td>
</tr>
<tr class="string" name="D" number="4">
	<th class="stringnumber">4</th>
	<th class="stringname">D</th>
	<td>&nbsp;</td>
	<!-- nut -->
	<td>&nbsp;</td>
	<td class="used">E</td>
	<td>&nbsp;</td>
</tr>
<tr class="string" name="A" number="5">
	<th class="stringnumber">5</th>
	<th class="stringname">A</th>
	<td class="used">A</td>
	<!-- nut -->
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>
<tr class="string" name="E" number="6">
	<th class="stringnumber">6</th>
	<th class="stringname">E</th>
	<td>&nbsp;</td>
	<!-- nut -->
	<td class="used">F</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>
</tbody></table>

<table class="fretboard" id="table-2" rowheader="F Chord" xnotes="D,Eb,E,F,Gb,G,Ab,A,Bb,B,C,Db" 
	scale="D:R,2,3,4,5,6,7" chord="E:R,m3,5,m7" fretrange="0,19" 
	fretfilters="1,red,#fff0f0,blue,x,3,5,3,x,5;0,green,#f0fff0,blue,x,6,7,7,x,8;0,red,#fff0f0,blue,x,10,10,10,x,10;0,green,#f0fff0,blue,x,13,14,12,x,13;0,red,#fff0f0,blue,x,15,17,15,x,17"
	viewmode="chordintervals" hover="scaleinterval" markers="3,5,7" extinfo="intervals,lefthand,steps">
<caption><a href="#" onclick="music.fretboard.onShow( event, 'chord' )">chords</a> 
<a href="#" onclick="music.fretboard.onShow( event, 'chordnotes' )">chordnotes</a> 
<a href="#" onclick="music.fretboard.onShow( event, 'chordintervals' )">chordintervals</a> 
<a href="#" onclick="music.fretboard.activateFretfilter( event, 1 );">fretfilter 1</a> 
<a href="#" onclick="music.fretboard.activateFretfilter( event, 2 );">fretfilter 2</a>
</caption>
<tbody></tbody></table>
<script language="javascript">music.fretboard.createTable( "table-2" );</script>


<div class="footer"><hr />
<p>Page author: USP &bull; Page editor: USP &bull; Last update: 2013-08-03 &bull; 2</p>
<p>&copy; 2013 Synesis Ulrich Sprick. All rights reserved. See <a href="../../copyright.htm">Copyright details</a>.</p>
<p><a href="#top">Back to Top</a> | <a href="../../index.htm" target="_top">Home</a> | <a id="reload" onclick="reloadFrameset()" href ="../../index.htm" target="_top" >Reload Frameset</a></p>
</div></body></html>
